import './Buy.css'
import axios from 'axios'
import './Cars.css'
import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
export default function Buy() {
  const [cars, setcars] = useState([])
  const navigate = useNavigate()
  const getcars = async () => {
    let { data } = await axios.get('http://127.0.0.1:3000/cars')
    let arr = data.data.filter(item => item.is_collect)
    setcars(arr)

  }


  const countarr = () => {
    let count = 0
    let num = 0
    cars.forEach(item => {
      if (item.is_collect) {
        count += item.price * item.sale
        ++num
      }


    })
    return { count, num }
  }
  useEffect(() => {
    getcars()
  }, [])
  return (
    <div style={{ width: '100vw', height: '100vh', backgroundSize: '100% cover', backgroundRepeat: 'no-repeat' }}>

      <div className='buynav'><span onClick={() => { navigate('/cars') }}>&lt;</span><span>提交订单</span></div>
      <div style={{ width: '96vw', margin: '0 auto' }}>

        <div className='buyaddress' ><span>📍新增地址</span><span>&gt;</span></div>
        {cars.map(item => {
          return <div style={{ marginBottom: '6vh' }}> <div className='cars_kuai' key={item._id}>
            <div className='cars_kuai1'>

              <span><img src={'/img/' + item.imgsrc} alt="" /></span>
            </div>
            <div className='cars_kuai2'>
              <div>{item.name}</div>
              <div>AO8010-100 41</div>
              <div>{item.sale}件</div>
              <div style={{ display: 'flex' }}><span>￥{item.price}</span></div>
            </div>
            <div>

            </div>

          </div>
            <div className='kuai_nei'>
              <div><span>邮费</span><span>包邮</span></div>
              <div><span>优惠卷</span><span>没有可用优惠卷</span></div>
            </div>
            <div className='kuai_nei'>
              <div><span>订单总金额</span><span>￥ {item.price * item.sale}</span></div>
              <div><span>备注</span><span>选填,建议先沟通后再填写</span></div>
            </div>
          </div>
        })}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-around', position: 'fixed', left: '0px', bottom: '0px', background: 'white', width: '100vw', height: '6vh', lineHeight: '6vh' }}>
        <span>共{countarr().num}件,合计￥{countarr().count}</span>
        <span><button style={{ background: 'red', color: 'white' }}>提交订单</button> </span>
      </div>
    </div>
  )
}
